var arr = [
  { x: -64, s: .83, z: 1 },
  { x: 140, s: 1, z: 2 },
  { x: 338, s: .83, z: 1 },
  { x: 960, s: .83, z: 1 },
  { x: 960, s: .83, z: 1 },
  { x: 960, s: .83, z: 1 },
]

function render() {
  // 1 获取所有轮播图
  var swiperObjs = document.querySelectorAll('.swiper .swiper-slide')
  // 2 遍历加行内样式
  swiperObjs.forEach(function (item, i) { // item就是每隔swiper-slide标签对象
    // item.style.transform = 'translateX(-64px) scale(0.83)'
    item.style.transform = `translateX(${arr[i].x}px) scale(${arr[i].s})`
    item.style.zIndex = arr[i].z
    // 方法1：根据索引判断加不一样（不推荐
    // 方法2：自己造一种数据结果
  })
}
render()
function next() {
  var temp = arr.pop()
  arr.unshift(temp)
  render()
}
function prev() {
  var temp = arr.shift()
  arr.push(temp)
  render()
}
//下一张
document.querySelector('.swiper .swiper-next').onclick = next

//上一张
document.querySelector('.swiper .swiper-prev').onclick = prev

//点击图切换
document.querySelector('.swiper .swiper-wrapper').onclick = function (evt) {
  var e = evt || window.event
  var target = e.target || e.srcElement
  if (target.parentNode.style.transform.includes('64px')) prev()
  if (target.parentNode.style.transform.includes('338px')) next()
}



